@charset "utf-8";


// 调节title大小、颜色
@mixin text($size:0rem,$color:#000){
	font-size: $size;
	color: $color;
	font-weight: normal;
	line-height: 1.5rem;
	text-align: left;
}

// 背景样式
@mixin background{
	background-color: #fff;
	margin-bottom: .75rem;
    padding: .75rem;
}



// 固定span样式
@mixin span-set{
	span{
		display: inline;
		margin-right: .75rem;
		vertical-align: middle;
	}
}

//ul-li样式设定
@mixin ul-li{
	ul{
		li{
			float: left;
		}
	}
}
	
// 产品图片 开始
.product-picture{
	// 背景样式
	@include background;
	left: 0rem;
	top: 0rem;
}
// 产品图片 结束


// 产品信息 开始
.product-note{
	//背景样式 
	@include background;
	div{
		height: 2rem;
	}
	
	// 标题
	.pn-1{
		@include span-set;
		display: block;
		span{
			@include text(1.1rem,#000);
		}
	}
	
	// 价格
	.pn-2{
		@include ul-li;
		@include span-set;
		display: block;
		
		.pn2-title{
			@include text(.5rem,#888);
		}
		
		.pn2-price{
			@include text(1.25rem,#dd2727);
		}
	}
	
	// 颜色选择
	.pn-3{
		@include ul-li;
		@include span-set;
		display: block;
		
		.pn3-title{
			@include text(.5rem,#888);
		}
		
		
		#color-button-1{
			border-radius: 50%;
			background-color: #fff;
			color: #000;
			height: 0.9rem;
		}
		#color-button-2{
			border-radius: 50%;
			background-color: #000;
			color: #fff;
			height: 0.9rem;
		}
	}
	
	// 网络选择
	.pn-4{
		@include ul-li;
		@include span-set;
		display: block;
		
		.pn4-title{
			@include text(.5rem,#888);
		}
		
	}
	
	// 内存选择
	.pn-5{
		@include ul-li;
		@include span-set;
		display: block;
		
		.pn5-title{
			@include text(.5rem,#888);
		}
		
	}
	
	// 运费
	.pn-6{
		@include ul-li;
		@include span-set;
		display: block;
		
		.pn6-title{
			@include text(.5rem,#888);
		}
		
	}
	
	// 数量选择
	.pn-7{
		@include ul-li;
		@include span-set;
		display: block;
		
		.pn7-title{
			@include text(.5rem,#888);
		}
		
		
		.pn7-counter{
			font-size: 0;
			line-height: normal;
			background-color: #ededed;
			border: .05rem solid #ddd;	
			margin-left: 5%;
			display: inline-block;	

			.pn7c-button{
				font-size: 1rem;
				font-weight: bolder;
				color: #000;
				text-align: center;
				width: 2rem;
				display: inline-block;
				background-color: #ededed;
				vertical-align: middle;
			}
				
			.pn7c-amount{
    			font-size: .75rem;
				line-height: 2rem;
				color: #333;
				text-align: center;
				width: 3.5rem;
				border-left: .05rem solid #ddd;	
				border-right: .05rem solid #ddd;
				display: inline-block;
				background-color: #fff;
				vertical-align: middle;
			}
		}
		
	}
		
}
// 产品信息 结束

// 认证图
.product-safe{
	//背景样式 
	background-color: #fff;	
	padding: 0;
	margin-bottom: .75rem;
}
	
// 品质信息
.product-quality{
	//背景样式 
	@include background;
	
	// 商品详细
	#tab1{
		// 轮播图
		.swiper-container{
			width: 100%;
			height: 12.5rem;
			padding: 0rem;
			margin-top: .25rem;
			.swiper-wrapper{
				.swiper-slide{
					img{
						width: 100%;
						height: 100%;
						margin: auto;
					}
				}
			}
		}
		
		// 质检报告
		.pq-1{
			@include background;
    		padding: 0;
			display: block;
	
			.pq1-title{
				@include text(.75rem,#666);
				text-indent: .5rem;
				font-weight: bold;
			}
			
			.pq1-main{
				.pq1m-p{
					font-size: .75rem;
					color: #999;
					line-height: 1rem;
					display: block;
					padding: 0;
					margin: 0 .5rem 1rem .5rem;
					span{
						color: #fff;
						background-color: #3b9bfb;
						padding: .05rem;
						font-size: .5rem;
						margin: 0 .25rem 0 0;
						border: .05rem solid #3b9bfb;
					}
				}
				
				.pq1m-test{
					position: relative;
					padding: 0;
					margin: 0 .5rem 1rem .5rem;
					
					.pq1mt-left{
						float: left;
						padding: 0;
						margin: 0;
						font-size: .8rem;
						line-height: 1.5rem;
						display: block;
					}
					
					.pq1mt-right{
						float: right;
						padding: 0;
						margin: 0;
						line-height: 1rem;
						display: block;
					}
				}
				
			}
	
			.pq1-more{
				clear: both;
				padding-bottom: .75rem;
			}
		}
		
		// 商品参数图
		.pq-2{
			@include background;
			padding: 0;
			.pq2-title{
				@include text(.75rem,#666);
				text-indent: .5rem;
				font-weight: bold;
			}
		}
		
		// 售后服务图
		.pq-3{
			@include background;
			padding: 0;
			.pq3-title{
				@include text(.75rem,#666);
				text-indent: .5rem;
				font-weight: bold;
			}
		}
		
	}
	
	// 口碑评价
	#tab2{
		
		// 评论标题
		.pq-4{
			//背景样式 
			@include background;
			width: 100%;
			padding: 0;
			margin-bottom: 2rem;
			border-bottom: .05rem solid #333;
			display: block;
			.pq4-title{
				@include text(1.5rem,#666);
				font-weight: bold;
				line-height: 1.7rem;
				margin-bottom: .5rem;
				display: block;
			}
			
			.pq4-left{
				float: left;
				display: block;
				margin-top: .5rem;
				font-size: .8rem;
				font-weight: bold;
				b{
					color: #dd2727;
				}
			}
				
			.pq4-right{
				float: right;
				display: block;
				margin-top: .5rem;
				font-size: .8rem;
				font-weight: bold;
				b{
					color: #3b9bff;
				}
			}
			
		}
		
		// 评论
		.pq-5{
			//背景样式 
			@include background;
			width: 100%;
			padding: 0;
			border-bottom: .05rem solid #333;
			display: block;
			
				
			div{
				margin-left: 20%;
				position: relative;
				border: .05rem solid #ccc;
				margin-bottom: .5rem;
				 
				 img{
					 float: left;
					 margin-left: -20%;
				 }
				 
				 h6{
					 padding: .2rem;
				 }
				 
				 p{
					 margin-top: .1rem;
					 text-indent: 1rem;
					 font-size: .5rem;
					 line-height: 1rem;
					 padding: .2rem;
				 }
				 
				 span{
					 font-size: .6rem;
					 color: #333;
					 position: absolute;
					 right: 0rem;
					 top: 0rem;
					 padding: .2rem;
				 }
			}
		}
	}
	
	
}



// 底部部分
.product-foot{
	background-color: #fff;
	text-align: center;
	font-size: .5rem;
	color: #666;
	line-height: 1.5rem;
	margin-bottom: 3rem;
	
	.pf-head{
		padding: .5rem 0rem 0rem 0rem;
		font-weight: bolder;
		display: block;
		margin-bottom: .5rem;
		
		img{
			display: block;
			margin: auto;
			width: 23.75%;
			
		}
	}
	
	.pf-button{
		width: 50%;
		text-align: center;
		padding: 0;
		margin-left: auto;
		margin-right: auto;
	}
}



.tools{
	width: 100%;
	padding: 0;
	margin: 0;
	display: block;
	
	a{
		background-color: #3b9bfb;
		border-left: .05rem solid aqua;
		display: block;

		span{
			color: #fff;
		}
	}
	
	.tools-money{
		background-color: #3B454E;
		font-size: 1.25rem;
		font-weight: bolder;
	}
	
	.tools-buy{
		font-size: 1.25rem;
		font-weight: normal;
		font-weight: bolder;
		color: #fff;
	}
	
	
}


.cartfix{
	position: fixed;
    left: 3.125%;
    bottom: 4rem;
    z-index: 500;
	a{
		display: block;
   	    width: 45px;
   	 	height: 45px;
   	  	background: #3b9bff url(http://s2.hqbcdn.com/mobile/v0/images/icons/sp_icos_2.png) no-repeat 9px -45px;
    	background-size: 50px;
    	border-radius: 50%;
	}
}
